<!DOCTYPE html>

<html lang="zh-CN">

<head>
    
    <title>wex5简单练习 - 塔纳托斯</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    
    

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <meta name="description" content="期末到来，总想留下点记录，于是乎，来了。 Wex5wex5这个开发工具主要是以点击或是拖拽组件的方式来添加组件，因此，熟悉各个组件的功能和具体使用场景对于开发来说就显得至关重要。组件呢我就不详细介绍了，说不定以后都不会用这个软件。在下就以练习的方式来介绍需注意的地方。 创建 刚打开软件差不多是上图的样子。Baas目录是创建服务的地方，UI2是创建项目的地方。 创建项目一般在UI2处鼠标右键新建一个">
<meta property="og:type" content="article">
<meta property="og:title" content="wex5简单练习">
<meta property="og:url" content="http://hai-chao.gitee.io/blog/2021/12/17/21.wex5-jian-dan-lian-xi/index.html">
<meta property="og:site_name" content="塔纳托斯">
<meta property="og:description" content="期末到来，总想留下点记录，于是乎，来了。 Wex5wex5这个开发工具主要是以点击或是拖拽组件的方式来添加组件，因此，熟悉各个组件的功能和具体使用场景对于开发来说就显得至关重要。组件呢我就不详细介绍了，说不定以后都不会用这个软件。在下就以练习的方式来介绍需注意的地方。 创建 刚打开软件差不多是上图的样子。Baas目录是创建服务的地方，UI2是创建项目的地方。 创建项目一般在UI2处鼠标右键新建一个">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-1.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-2.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-3.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-4.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-7.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-5.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-6.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-8.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-9.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-10.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-11.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-12.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-13.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-14.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-15.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-16.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-17.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-18.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-19.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-20.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-21.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-22.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-23.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-24.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-25.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-26.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-27.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-28.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-29.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-30.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-31.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-32.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-33.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-34.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-35.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-36.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-37.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-38.png">
<meta property="og:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-39.png">
<meta property="article:published_time" content="2021-12-17T08:00:00.000Z">
<meta property="article:modified_time" content="2021-12-17T09:09:40.388Z">
<meta property="article:author" content="塔纳托斯">
<meta property="article:tag" content="总结">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-1.png">
    <link rel="stylesheet" href="/blog/lib/jquery.fancybox.min.css?v=1679297521123">
    
    <link rel="stylesheet" href="/blog/lib/mdui_043tiny/css/mdui.css?v=1679297521123">
    <link rel="stylesheet" href="/blog/lib/iconfont/iconfont.css?v=1679297521123">
    <link rel="stylesheet" href="/blog/css/style.css?v=1679297521123">
     
    
<meta name="generator" content="Hexo 5.3.0"><link rel="alternate" href="/blog/atom.xml" title="塔纳托斯" type="application/atom+xml">
<link rel="stylesheet" href="/blog/css/prism-tomorrow.css" type="text/css"></head>

<body class="mdui-drawer-body-left">
    
    <div id="nexmoe-background">
        <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/nexmoe/nexmoe.github.io@latest/images/cover/5c3aec85a4343.jpg)"></div>
        <div class="mdui-appbar mdui-shadow-0">
            <div class="mdui-toolbar">
                <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
                <div class="mdui-toolbar-spacer"></div>
                <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
                <a href="/blog/" title="塔纳托斯" class="mdui-btn mdui-btn-icon"><img src="https://s6.jpg.cm/2022/01/17/LFpniO.md.jpg" alt="塔纳托斯"></a>
            </div>
        </div>
    </div>
    <div id="nexmoe-header">
        <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/blog/" title="塔纳托斯">
            <img src="https://s6.jpg.cm/2022/01/17/LFpniO.md.jpg" alt="塔纳托斯" alt="塔纳托斯">
        </a>
    </div>
    <div class="nexmoe-count">
        <div><span>文章</span>29</div>
        <div><span>标签</span>6</div>
        <div><span>分类</span>0</div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/blog/" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-container"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
    
    
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/blog/tags/java/" style="font-size: 10px;">java</a> <a href="/blog/tags/%E5%88%86%E4%BA%AB/" style="font-size: 20px;">分享</a> <a href="/blog/tags/%E5%90%83%E7%93%9C/" style="font-size: 10px;">吃瓜</a> <a href="/blog/tags/%E5%AD%A6%E4%B9%A0/" style="font-size: 16.67px;">学习</a> <a href="/blog/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.33px;">总结</a> <a href="/blog/tags/%E6%B8%B8%E5%90%8E%E6%84%9F/" style="font-size: 10px;">游后感</a>
    </div>
    
  </div>

    
</aside>
    <div class="nexmoe-copyright">
        &copy; 2023 塔纳托斯
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a>
        
    </div>
</div><!-- .nexmoe-drawer -->
    </div>
    <div id="nexmoe-content">
        <div class="nexmoe-primary">
            <div class="nexmoe-post">

  <article>
      
          <div class="nexmoe-post-cover"> 
              
              <h1>wex5简单练习</h1>
          </div>
      
      
      <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2021年12月17日</a>
</div>

      

      <p>期末到来，总想留下点记录，于是乎，来了。</p>
<h2 id="Wex5"><a href="#Wex5" class="headerlink" title="Wex5"></a>Wex5</h2><p>wex5这个开发工具主要是以点击或是拖拽组件的方式来添加组件，因此，熟悉各个组件的功能和具体使用场景对于开发来说就显得至关重要。组件呢我就不详细介绍了，说不定以后都不会用这个软件。在下就以练习的方式来介绍需注意的地方。</p>
<h3 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h3><p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-1.png"></p>
<p>刚打开软件差不多是上图的样子。Baas目录是创建服务的地方，UI2是创建项目的地方。</p>
<p>创建项目一般在UI2处鼠标右键新建一个文件夹，给文件夹起个名字（基本上为项目名），我在这儿就先建第一个练习，名叫test1。在test1的地方鼠标右键新建W文件，这个根据项目需求来选择模板，test1练习就选择标准中的空白页面，然后给文件改个名字 ，基本上项目就创建好了。</p>
<h3 id="test1-gt-加载本地json"><a href="#test1-gt-加载本地json" class="headerlink" title="test1-&gt;加载本地json"></a>test1-&gt;加载本地json</h3><p>先向空白页面中添加<strong>panel</strong>组件，在top中加入一个<strong>titleBar</strong>组件，修改标题。差不多如下图所示：</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-2.png"></p>
<p>创建一个json文件，看图，注意语法</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-3.png"></p>
<p>添加数据，选择data组件。<strong>data组件中的数据是存放在内存中，而baasData是与数据库绑定</strong>。</p>
<p>改xid的名字为userData，对该组件编辑列，按照json新建5个属性。</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-4.png"></p>
<p>向content中加入<strong>dataTable</strong>组件，改xid的名字，data选择userData，鼠标右键添加列，将需要的列添加进来，效果看下图</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-7.png"></p>
<p>model -&gt; 事件 -&gt; 双击onLoad</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-5.png"></p>
<p>写加载本地json功能的js脚本</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-6.png"></p>
<p>启动tomcat，看看效果</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-8.png"></p>
<p>可以看到，成功的显示出来。</p>
<h3 id="test2-gt-添加数据和删除数据"><a href="#test2-gt-添加数据和删除数据" class="headerlink" title="test2-&gt;添加数据和删除数据"></a>test2-&gt;添加数据和删除数据</h3><p>先加<strong>panel</strong>组件，在top中加入一个<strong>titleBar</strong>组件，修改标题，在content中在加入一个<strong>contents</strong>组件，在contents组件中加入两个content，加入的这两个content一个充当显示页面，另一个充当添加页面，修改这两个content的xid为showContent和addContent。最后在bottom中加入<strong>buttonGroup</strong>，调一下buttonGroup的class属性，对排列方式选第三个，修改一下buttonGroup下面的button的xid和text属性，我改成的是showBtn、显示和addBtn、添加。最后将两个按钮的target属性选择和之前两个content起对应。</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-9.png"></p>
<p><strong>添加服务</strong>：在Baas目录下新建一个文件夹，叫test2，然后在test2下新建一个服务，名为accountService，点击新建数据库action，选account，account，点确认。在这里我用wex5自带的account数据库做演示，对account表进行数据的添加和删除。点击保存，<strong>新建的服务要对其进行模型编译，还有对服务进行修改后也要重新编译</strong>。对test2文件夹进行模型编译，记得要把tomcat服务器关掉。下图说明编译正常。</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-10.png"></p>
<p>在model中加入<strong>baasData</strong>组件，改xid，我改为accountData。点击tableName属性值的那三个点的按钮，查test2，选中刚建好的服务，确定。</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-11.png"></p>
<p>在showContent中我们用<strong>dataTable</strong>组件将数据显示出来，启动tomcat看一下</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-12.png"></p>
<p>在addContent中加入5个<strong>labelinput</strong>组件，改一下label，调一下样式。在加入一个按钮，改xid为addDataBtn，效果看下图</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-13.png"></p>
<p>给添加信息按钮写点击事件</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-14.png"></p>
<p>看看添加的效果</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-15.png"></p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-16.png"></p>
<p>开始写删除数据，先将dataTable的多选属性改为是。再在showContent页面中添加一个按钮，改xid为delBtn，写点击事件</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-17.png"></p>
<p>看看效果</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-18.png"></p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-19.png"></p>
<h3 id="test3-gt-购物车"><a href="#test3-gt-购物车" class="headerlink" title="test3-&gt;购物车"></a>test3-&gt;购物车</h3><p>test3就简单仿照wex5给出的takeout案例来做个练习吧。</p>
<p>和test2开头一样，加panel，加2个page，改xid为foodContent和cartContent，加2个button，修改xid，修改一些属性</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-20.png"></p>
<p>建立服务，这次选择的是x5数据库中的takeout_food表，记得模型编译</p>
<p>服务建立好后在model中加入<strong>baasData</strong>组件，修改xid为foodData，修改tableName属性为刚建好的服务</p>
<p>这次在foodContent页面中使用<strong>scrollView</strong>组件，这个组件会实现上拉刷新，下拉加载数据的作用</p>
<p>scrollView添加后会有3个子div，在第二个div中加入内容，加入一个普通的list（这个list在组件列表中没有括号后缀）</p>
<p>list的data属性选foodData，在list中的li下加入row组件，表示一行</p>
<p>在row组件下的默认生成的3个col中都加入output组件，修改bind-ref属性，绑定的是foodData当前行的这些属性</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-21.png"></p>
<p>启动tomcat看看效果</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-22.png"></p>
<p>和预想的一样，我们在row组件中加1列，在新加入的col中加入button组件，修改xid为orderFoodBtn，修改label属性，在class属性中的颜色样式选择btn-link，这个会使按钮的背景透明，这样按钮就只会显示文字</p>
<p>目前的这些操作在test1和test2中介绍得比较详细，按照文字说明来添加就OK了，因此会少放图</p>
<p>接下来在cartContent中添加一个panel（bootstrap）组件，在heading部分修改标题</p>
<p>在model中加入data组件，修改xid为cartData，鼠标右键编辑列</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-23.png"></p>
<p>在body部分加个list，将data属性选为cartData</p>
<p>然后在list下的li中加入row组件，再在row组件中添加6列</p>
<p>前3列加入output组件，第4列加一个按钮，第5列加output组件，第6列加一个按钮，这些output都要绑定好数据：修改bind-ref属性</p>
<p>第4列按钮改xid为reduceCountBtn，第6列按钮改xid为addCountBtn，这两个按钮修改icon属性，一个选减号的，一个选加号的，并且修改class</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-24.png"></p>
<p>在footer中加入一个labeloutput，label修改text为合计</p>
<p>基本准备都做好了，剩下的是写事件写JS</p>
<p>先给那个xid为orderFoodBtn的按钮，及文字表示为来一份的按钮先写点击事件</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-25.png"></p>
<p>来看看效果，启动tomcat，点2份老北京炸酱面，点1份宫爆鸡丁</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-26.png"></p>
<p>可以看到，在下单页面点击来一份的按钮在购物车这个页面数据成功的添加进来了</p>
<p>接下来写减号，加号按钮的点击事件</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-27.png"></p>
<p>接下来写合计金额的显示</p>
<p>将cartData的sumMoney属性添加一个规则</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-28.png"></p>
<p>将那个输出合计金额的output的bind-text属性绑定cartData组件中的sumMoney属性，并选择sum函数对其求总和</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-29.png"></p>
<p>启动一下看看效果</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-30.png"></p>
<h3 id="test4-gt-跳转页面"><a href="#test4-gt-跳转页面" class="headerlink" title="test4-&gt;跳转页面"></a>test4-&gt;跳转页面</h3><p>这个test4就写个跳转，顺带介绍2个组件</p>
<p>标准创建，这次index的模板选择标准中的标准页面</p>
<p>首先介绍<strong>wing</strong>组件，这个组件能够实现打开左右菜单的功能</p>
<p>先加入wing组件，再把模板生成的panel组件拖入到wing组件中的content中</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-31.png"></p>
<p>我们把titleBar中的left中的按钮换个图标，并写个点击事件使其能把wing组件的左菜单打开</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-32.png"></p>
<p>向左菜单中加入一些东西，及在wing组件的left中加入一个标题吧</p>
<p>我加入了一个h1组件，并修改了一下样式，加了一个标题的背景色</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-33.png"></p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-34.png"></p>
<p>借用一下test2中的服务accountService，我们在index中把account中的数据显示出来</p>
<p>用list组件，最普通的那个，及没有括号来修饰后缀的</p>
<p>效果差不多看下图</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-35.png"></p>
<p>现在我们新建一个w文件，叫list.w</p>
<p>用来显示我们点击主页中的list中的某一项的详细信息</p>
<p>先介绍<strong>windowDialog</strong>组件，这个组件可以实现跳转页面并传递数据</p>
<p>将windowDialog组件的src属性选为我们刚建的list.w文件</p>
<p>在list.w文件中加入<strong>windowReceiver</strong>组件，该组件是用来接收数据的</p>
<p>现在给index.w中列表项加入点击事件，使其点击时跳转到list.w中</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-36.png"></p>
<p>给list.w中加入一些labeloutput用来显示数据</p>
<p>给list.w中的windowReceiver添加接收事件，并把数据显示在labeloutput上</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-37.png"></p>
<p>启动tomcat来看看效果</p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-38.png"></p>
<p><img src="https://cdn2.maocdn.cn/img/2021/12/17/hexo-blog-21-39.png"></p>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>wex5对我来说没多大兴趣，因此没怎么学，就简单写4个test用作记录</p>
<p>话说，看了看往年的考题，结果这个H5考试中这道题有点简单吧，基本上就是test1和test2结合起来，连服务都不需要建，那么考试时需要的model就很明确吧。话也不说得太打脸，多多准备准备总是有益的</p>

  </article>

  
      
    <div class="nexmoe-post-copyright">
        <strong>本文作者：</strong>塔纳托斯<br>
        <strong>本文链接：</strong><a href="http://hai-chao.gitee.io/blog/2021/12/17/21.wex5-jian-dan-lian-xi/" title="http:&#x2F;&#x2F;hai-chao.gitee.io&#x2F;blog&#x2F;2021&#x2F;12&#x2F;17&#x2F;21.wex5-jian-dan-lian-xi&#x2F;" target="_blank" rel="noopener">http:&#x2F;&#x2F;hai-chao.gitee.io&#x2F;blog&#x2F;2021&#x2F;12&#x2F;17&#x2F;21.wex5-jian-dan-lian-xi&#x2F;</a><br>
        
            <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
        
    </div>


  
  
  <div class="nexmoe-post-meta nexmoe-rainbow">
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/blog/tags/%E6%80%BB%E7%BB%93/" rel="tag">总结</a>
    
</div>

  
      <div class="nexmoe-post-footer">
          
      </div>
  
</div>
            <div class="nexmoe-post-right">
              <div class="nexmoe-fixed">
                  <div class="nexmoe-tool"> 
                    
                      
                        
                          
                          
                              <button class="mdui-fab catalog" style="overflow:unset;">
                                  <i class="nexmoefont icon-i-catalog"></i>
                                  <div class="nexmoe-toc">
                                      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Wex5"><span class="toc-number">1.</span> <span class="toc-text">Wex5</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA"><span class="toc-number">1.1.</span> <span class="toc-text">创建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#test1-gt-%E5%8A%A0%E8%BD%BD%E6%9C%AC%E5%9C%B0json"><span class="toc-number">1.2.</span> <span class="toc-text">test1-&gt;加载本地json</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#test2-gt-%E6%B7%BB%E5%8A%A0%E6%95%B0%E6%8D%AE%E5%92%8C%E5%88%A0%E9%99%A4%E6%95%B0%E6%8D%AE"><span class="toc-number">1.3.</span> <span class="toc-text">test2-&gt;添加数据和删除数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#test3-gt-%E8%B4%AD%E7%89%A9%E8%BD%A6"><span class="toc-number">1.4.</span> <span class="toc-text">test3-&gt;购物车</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#test4-gt-%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.5.</span> <span class="toc-text">test4-&gt;跳转页面</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%93%E8%AF%AD"><span class="toc-number">2.</span> <span class="toc-text">结语</span></a></li></ol>
                                  </div>
                              </button>
                          
                          
                      
                    
                      <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
                  </div>
              </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

 

<script async src="/blog/js/app.js?v=1679297521124"></script>



<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>


    





</body>

</html>
